* {
    margin: 0;
    padding: 0;
}

@function vw($px) {
    @return($px/750)*100vw;
}

html,
body {
    width: 100%;
    height: 100%;
    background-color: #F5F5F5;
}

header {
    // background-color: ;
    background: #ff5001;
    width: 100%;
    height: vw(485);
    position: relative;

    /* 设置 */
    .top-set {
        width: 95%;
        margin: auto;
        height: vw(85);
        // background-color: royalblue;
        line-height: vw(85);
        display: flex;
        // font-size: vw(30);
        justify-content: space-between;
        color: white;

        /* 设置 */
        .icon-xitongshezhi {
            font-size: vw(50);
        }

        /* 更多 */
        .icon-gengduo {
            font-size: vw(50);
            position: relative;

            div {
                // position: absolute;
                // right: 0;
                // top: vw(84);
                // width: vw(220);
                // height: vw(460);
                // border-radius: vw(100);

                .icon-jiantou_shang {
                    position: absolute;
                    right: vw(18);
                    top: vw(38);
                    // width: vw(24);
                    // height: vw(24);
                    font-size: vw(40);
                    color: rgba(85, 85, 85, 0.55);
                }

                ul {
                    background: rgba(85, 85, 85, 0.55);
                    position: absolute;
                    right: 0;
                    top: vw(84);
                    width: vw(220);
                    height: vw(460);
                    border-radius: vw(20);
                    z-index: 5;
                    overflow: hidden;

                    li {
                        width: vw(250);
                        height: vw(95);
                        padding-left: vw(20);
                        // padding: vw(25);
                        border-bottom: vw(1) solid white;

                        .iconfont {
                            font-size: vw(36);
                        }

                        span:nth-child(2) {
                            font-size: vw(30);
                        }
                    }
                }
            }
        }
    }

    /* 点击登录 */
    .top-img {
        width: vw(528);
        height: vw(236);
        // background-color: yellow;
        margin: auto;


        p {
            text-align: center;
            color: white;
            font-size: vw(30);
        }

        img {
            display: inline-block;
            width: vw(176);
            height: vw(176);
            text-align: center;
            margin: 0 vw(176);
        }
    }

    /* 收藏 */
    .top-bottom {
        background: rgba(#AAA, $alpha: 0.5);
        width: 100%;
        height: vw(132);
        color: white;
        font-size: vw(30);
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);

        ul {
            width: 98%;
            margin: auto;
            display: flex;
            justify-content: space-between;
            align-items: center;

            li {
                height: vw(88);
                padding: vw(22) 0;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;

                .icon-shoucang,
                .icon-haofangtuoiconfont_dianpushoucang,
                .icon-zuji {
                    font-size: vw(50);
                }

            }
        }
    }

}

main {
    .list1 {
        li {
            width: 100%;
            margin-top: vw(22);
            background: white;

            .div1 {
                width: 95%;
                height: vw(44);
                border-bottom: vw(1) solid #ccc;
                // padding: vw(22) vw(30) vw(11) 0;
                padding: vw(22) vw(0) vw(22) 0;
                margin: auto;

                // margin-left: vw(22);
                .div2 {
                    width: 90%;
                    height: vw(44);
                    float: left;

                    span:nth-child(2),
                    .iconfont {
                        font-size: vw(30);
                    }

                }

                #span1 {
                    float: right;
                }
            }

            .div3 {
                .list2 {
                    width: 95%;
                    height: vw(122);
                    // background: yellow;
                    margin: auto;
                    display: flex;
                    align-items: center;
                    border-bottom: vw(1) solid #ccc;


                    li {
                        color: #888;
                        display: flex;
                        flex-direction: column;
                        align-items: center;

                        .iconfont {
                            // color: red;
                            font-size: vw(40);
                        }
                    }
                }
            }
        }
    }
}